<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="estilo.css">
    </head>
    <body>
        <div class="menu">
        <h3>FORMULÁRIOS</h3>
        <ul>
            <li><a href="#41">4.1 INTRODUÇÃO</a></li>
            <li><a href="#42">4.2 ELEMENTOS DE FORMULÁRIOS: CAMPOS DE TEXTO</a></li>
            <li><a href="#421">4.2.1 TEXTO CURTO</a></li>
            <li><a href="#422">4.2.2 TEXTO OCULTO</a></li>
            <li><a href="#423">4.2.3 TEXTO LONGO</a></li>
            <li><a href="#43">4.3 OUTROS ELEMENTOS DE FORMULÁRIO</a></li>
            <li><a href="#431">4.3.1 LISTA DE OPÇÕES</a></li> 
            <li><a href="#432">4.3.2 BOTÕES DE RADIO</a></li>
            <li><a href="#433">4.3.3 CAIXAS DE VALIDAÇÃO</a></li>
            <li><a href="#44">4.4 BOTÃO SUBMIT, APAGAR CAMPOS E OUTROS</a></li>
            <li><a href="#441">4.4.1 BOTÃO ENVIAR CAMPOS</a></li>
            <li><a href="#442">4.4.2 BOTÃO APAGAR CAMPOS</a></li>
            <li><a href="#443">4.4.3 DADOS OCULTOS</a></li>
            <li><a href="html.html">Menu Principal</a></li>
        </ul>
        </div>
        <div class="corpo">
        <p>
            4 Formulários 
        </p>
        <p>
            <a id="41">4.1 INTRODUÇÃO </a>
        </p>
        <p>
            Até agora vimos a forma na qual o HTML providencia e mostra a informação, 
            essencialmente mediante o texto, imagens e links. Falta ver de que forma 
            podemos trocar informações com nosso visitante. Desde então, este novo 
            aspecto é primordial para a grande quantidade de ações que se podem 
            realizar mediante o Web: Comprar um artigo, preencher uma enquete, 
            enviar um comentário ao autor .

            Vimos anteriormente que poderíamos, mediante os links, entrar em contato 
            diretamente com um correio eletrônico. Entretanto, esta opção pode ser 
            em alguns casos pouco versátil se o que desejamos é que o navegante nos 
            envie uma informação bem precisa. É através dele, o HTML que propõem 
            outra solução muito mais ampla: Os formulários. 

            Os formulários são estas famosas caixas de texto e botões que podemos 
            encontrar em muitas páginas web. São muito utilizados para realizar 
            buscar ou também para introduzir dados pessoais, por exemplo, em sites 
            de comércios eletrônico. Os dados que o usuário introduz nestes campos 
            são enviados ao correio eletrônico do administrador do formulário ou 
            também, em um programa que se encarrega de processá-lo automaticamente. 

            Usando HTML podemos unicamente enviar o formulário a um correio 
            eletrônico. Se quisermos processar o formulário mediante um programa, a 
            coisa pode ser um pouco mais complexa, já que teremos que empregar 
            outras linguagens mais sofisticadas. Neste caso, a solução mais simples 
            é utilizar os programas pré-desenhados que nos propõem um grande número 
            de servidores de hospedagem e que nos permitem armazenar e processar os 
            dados em forma de arquivo ou outros formatos. Se sua página está 
            hospedada em um servidor que não lhe propõem estes tipos de vantagens, 
            você sempre poderá recorrer a servidores de terceiros que oferecem este 
            ou outros tipos de serviços gratuitos para webs. É claro que também 
            existe outra alternativa que é a de aprender linguagens como ASP ou PHP 
            que nos permitirá, entre outras coisas, o tratamento de formulários. 

            Os formulários são definidos por meio das etiquetas &lt;form&gt; e 
            &lt;/form&gt;. Entre estas duas etiquetas colocaremos todos os campos e 
            botões que compõem o formulário. Dentro desta etiqueta &lt;form&gt; 
            devemos especificar alguns atributos: 
        </p>
        <p>
            &lt;form&gt;form action= mailto:professora@lucilia.com.br 
            method= post enctype = text/plain&gt;
        </p> 
        <p>
            ACTION: Define o tipo de ação a realizar com o formulário. Como já 
            dissemos, existem duas possibilidades: <br/>
            • O formulário é enviado a um endereço de correio eletrônico <br/>
            • O formulário é enviado a um programa ou script que processa seu 
            conteúdo. 
        </p>
        <p>
            No primeiro caso, o conteúdo do formulário é enviado ao endereço de 
            correio eletrônico especificada por meio de uma sintaxe deste tipo: 
        </p>
        <p>
            Se o que queremos é que o formulário seja processado por um programa, 
            temos de especificar o endereço do arquivo que contem o tal programa. 
        </p>
        <p>
            METHOD: Este atributo se encarrega de especificar a forma na qual o 
            formulário é enviado. Os dois valores possíveis que este atributo 
            pode tomar são post e get. Para efeitos práticos e salvo se lhe 
            disserem o contrário, daremos sempre o valor post. 
        </p>
        <p>
            ENCTYPE: Utiliza-se para indicar a forma na qual viajará a 
            informação que for mandada pelo formulário. No caso mais corrente, 
            enviar o formulário por correio eletrônico, o valor deste atributo 
            deve ser text/plain. Assim, conseguimos que o conteúdo do formulário 
            seja enviado como texto plano dentro do e-mail. 
        </p>
        <p>
            Se quisermos que o formulário se processe automaticamente por um 
            programa, geralmente não utilizaremos este atributo, de forma que 
            tome seu valor padrão, ou seja, não incluiremos enctype dentro da 
            etiqueta &lt;form&gt;. 
        </p>
        <p>
            <a id="42">4.2 ELEMENTOS DE FORMULÁRIOS: Campos de Texto </a>
        </p>
        <p>
            O HTML nos propõe uma grande diversidade de alternativas na hora de 
            criar nossos formulários. Estas vão desde a clássica caixa de texto 
            até a lista de opções passando pelas caixas de validação. Veremos em 
            que consiste cada uma destas modalidades e como podemos 
            implementá-las em nosso formulário. 
        </p>
        <p>
            <a id="421">4.2.1 TEXTO CURTO </a>
        </p>
        <p>
            As caixas de texto são colocadas por meio da etiqueta &lt;input&gt;. 
            Dentro desta etiqueta temos de especificar o valor de dois atributos: 
            type e name. 
            A etiqueta é da seguinte forma: 
        </p>
        &lt;input type=text name=nome&gt; 
        <p>
            Deste modo expressamos nosso desejo de criar uma caixa de texto cujo 
            conteúdo será chamado nome (por exemplo). O aspecto deste tipo de 
            caixas é conhecido, como pode ser visto aqui: 
        </p>
        <p>
            O nome do elemento do formulário é de grande importância para poder 
            identificá-lo em nosso programa de processamento ou no e-mail 
            recebido. Por outro lado, é importante indicar o atributo type, já 
            que, como veremos, existem outras modalidades de formulário que usam 
            esta mesma etiqueta. 
        </p>
        <p>
            O emprego destas caixas está fundamentalmente destinado à tomada de 
            dados breves: palavras ou conjuntos de palavras de longitude 
            relativamente curta. Veremos mais adiante que existe outra forma de 
            tomar textos mais longos a partir de outra etiqueta. 
        </p>
        <p>
            Além destes dois atributos, essenciais para o correto funcionamento 
            de nossa etiqueta, existem outra série de atributos que podem ser de 
            utilidade, mas que não são imprescindíveis: 
        </p>
        <p>
            SIZE: Define o tamanho da caixa em número de caracteres. Se ao 
            escrever o usuário chega ao final da caixa, o texto irá desfilando 
            à medida que se escreve fazendo desaparecer a parte de texto que 
            fica à esquerda. 
        </p>
        <p>
            MAXLENGTH: Indica o tamanho máximo do texto que pode ser tomado pelo 
            formulário. É importante não confundi-lo com o atributo size. 
            Enquanto o primeiro define o tamanho aparente da caixa de texto, 
            maxlength indica o tamanho máximo real do texto que pode ser escrito. 
            Podemos ter uma caixa de texto com um tamanho aparente (size) que é 
            menor do que o tamanho máximo (maxlength). O que ocorrerá neste caso 
            é que, ao escrever, o texto irá desfilando dentro da caixa até que 
            cheguemos ao seu tamanho máximo definido por maxlength, momento no 
            qual será impossível continuar escrevendo. 
        </p>
        <p>
            VALUE: Em alguns casos pode ser interessante atribuir um valor 
            definido ao campo em questão. Isto pode ajudar ao usuário a 
            preencher mais rapidamente o formulário ou a dar alguma idéia sobre 
            a natureza de dados que se requerem. Este valor inicial do campo 
            pode ser expresso mediante o atributo value. Vejamos seu efeito com 
            um exemplo simples: 
        </p>
        &lt;input type="text" name="nome" value="Josefa Palotes"&gt;
        <p>
            Gera um campo deste tipo: 
            <input type="text" name="nome" value="Josefa Palotes"> 

        </p>
        <p>
            <a id="422">4.2.2 TEXTO OCULTO </a>
        </p>
        <p>
            Podemos esconder o texto escrito por meio de asteriscos de forma a 
            fornecer uma certa confiabilidade. Estes tipos de campos são 
            análogos aos de texto com somente uma diferença: deslocando o 
            atributo type=text por type=password: 
        </p>
        <INPUT type=password name=nome> 
        <p>
            Neste caso, pode ser comprovado que ao escrever dentro do campo no 
            lugar de texto serão vistos asteriscos. Estes campos são ideais 
            para a introdução de dados confidenciais, principalmente códigos de 
            acesso. Isto pode ser visto em funcionamento a seguir: 
        </p>
        <p>
            <a id="423">4.2.3 TEXTO LONGO </a>
        </p>
        <p>
            Se desejarmos colocar à disposição do usuário um campo de texto 
            onde possa escrever comodamente sobre um espaço composto de várias 
            linhas, temos de convocar uma nova etiqueta: &lt;textarea&gt; e seu 
            fechamento correspondente. 
        </p>
        <p>
            Estes tipos de campos são práticos quando o conteúdo a enviar não é 
            um nome, telefone ou qualquer outro dado breve, e sim, um comentário, 
            opinião, etc. Dentro da etiqueta TEXTAREA deveremos indicar, como 
            para o caso visto anteriormente, o atributo name para associar o 
            conteúdo a um nome que será semelhante a uma variável nos programas 
            de processo. Além disso, podemos definir as dimensões do campo a 
            partir dos atributos rows (número de linhas do campo de texto.) e 
            cols (número de colunas do campo de texto). A etiqueta fica portanto, 
            desta forma: 
        </p>
        <textarea name="comentário" rows="10" cols="40"></textarea> 
        <p>
            Mesmo assim, é possível definir o conteúdo do campo. Para isso, não 
            usaremos o atributo value e sim, que escreveremos dentro da etiqueta 
            o conteúdo que lhe desejamos atribuir. Vejamos: 
        </p>
        <textarea name = "comentário" rows = "10" cols = "40"> Escreva seu comentário</textarea> 
        <p>
            Escreva seu comentário.... 
        </p>
        <p>
            <a id="43">4.3 OUTROS ELEMENTOS DE FORMULÁRIO </a>
        </p>
        <p>
            Efetivamente, os textos são uma maneira muito prática de fazer 
            chegar a informação do navegante. Porém, em muitos casos, os textos 
            são dificilmente adaptáveis a programas que possam processá-los 
            devidamente ou também pode ser que seu conteúdo não se ajuste ao 
            tipo de informação que requeremos. É por isso que, em determinados 
            casos, pode ser mais efetivo propor uma escolha ao navegante a 
            partir da exposição de uma série de opções. 
        </p>
        <p>
            Este é o caso de, por exemplo, oferecer uma lista de países, o tipo 
            de cartão de crédito para um pagamento, etc. Estes tipos de opções 
            podem ser expressadas de diferentes formas. 
        </p>
        <p>
            <a id="431">4.3.1 LISTA DE OPÇÕES </a>
        </p>
        <p>
            As listas de opções são menus desdobráveis que nos permite escolher 
            uma (ou várias) das múltiplas opções que nos propõem. Para 
            construí-las utilizaremos uma etiqueta com seu respectivo 
            fechamento: &lt;select&gt;. Como para os casos já vistos, dentro 
            desta etiqueta definiremos seu nome por meio do atributo name. Cada 
            opção será incluída em uma linha precedida da etiqueta &lt;option&gt;. 
        </p>
        <p>
            &lt;select&gt;name=estação> 
            &lt;option&gt;Primavera&lt;/option&gt;
            &lt;option&gt;Verão&lt;/option&gt;
            &lt;option&gt;Outono&lt;/option&gt;
            &lt;option&gt;Inverno&lt;/option&gt;
            &lt;/select&gt;
        </p>
        <p>
            Primavera 
        </p>
        <p>
            A etiqueta &lt;option&gt; ainda pode ser precisada por meio de 
            outros atributos: 
        </p>
        <p>
            VALUE: Define o valor da opção que será enviada ao programa ou ao 
            correio eletrônico se o usuário escolhe essa opção. Este atributo 
            pode ser muito útil se o formulário for enviado a um programa visto 
            que a cada opção se pode associar um número ou letra, o qual 
            torna-se mais facilmente manipulável que uma palavra ou texto. 
            Poderíamos assim escrever linhas conforme escrito abaixo. Deste 
            modo, se o usuário escolhe primavera, o que chegará ao programa 
            (ou ao correio) é uma variável chamada estação que terá com valor 1. 
            No correio eletrônico receberíamos: estação=1 
        </p>
        <p>
            &lt;option value=1&gt;Primavera&lt;/option&gt; 
        </p>
        <p>
            SELECTED: Este atributo não toma nenhum valor senão que simplesmente 
            indica que a opção que apresenta está escolhida por padrão. Assim, 
            se mudamos a linha do código anterior por 
            &lt;option selected&gt;Outono&lt;/option&gt;, o resultado será: 
        </p>
        <p>
            Outono 
        </p>
        <p>
            <a id="432">4.3.2 BOTÕES DE RADIO </a>
        </p>
        <p>
            Existe outra alternativa para expor uma escolha, neste caso, 
            obrigamos ao internauta a escolher unicamente uma das opções que 
            lhe propõem. A etiqueta empregada neste caso é &lt;input&gt; na qual 
            teremos o atributo type que temos de tomar o valor radio. Vejamos 
            um exemplo: 
        </p>
        <p>
            &lt;input type="radio" name="estação" value="1"&gt;Primavera &lt;br&gt; 
            &lt;input type="radio" name="estação" value="2"&gt;Verão &lt;br&gt; 
            &lt;input type="radio" name="estação" value="3"&gt;Outono &lt;br&gt; 
            &lt;input type="radio" name="estação" value="4"&gt;Inverno &lt;br&gt; 
        </p>
        <p>
            O resultado é o seguinte: 
        </p>
        <p>
            Primavera 
            Verão 
            Outono 
            Inverno 
        </p>
        <p>
            Como podemos ver, a cada uma das opções se atribui uma etiqueta 
            input dentro da qual atribuímos o mesmo nome (name) para todas as 
            opções e um valor (value) distinto. Se o usuário escolhe 
            supostamente Outono, receberemos em nosso correio uma linha tal 
            como esta: estação=3. Cabe assinalar que é possível pré-selecionar 
            por padrão uma das opções. Isto se pode conseguir por meio do 
            atributo checked: 
        </p>
        <p>
        &lt;input type="radio" name="estação" value="2" checked&gt;Verão 
        </p>
        <p>
        Vejamos o efeito: 
        </p>
        <p>
        Primavera 
        Verão 
        Outono 
        Inverno 
        </p>
        <p>
            <a id="433">4.3.3 CAIXAS DE VALIDAÇÃO </a>
        </p>
        <p>
        Estes tipos de elementos podem ser ativados ou desativados pelo visitante com um simples clique sobre a caixa em questão. A sintaxe utilizada é muita parecida com as anteriores. A única diferença fundamental é o valor adotado pelo atributo type. 
        </p>
        <p>
        Da mesma forma que para os botões de rádio, podemos ativar a caixa por meio do atributo checked. O tipo de informação que chegará ao nosso correio (ou ao programa) será do tipo: feijoada=on (ou off dependendo se tiver sido ativada ou não) 
        </p>
        <p>
        <input type="checkbox" name="paella">Adoro uma feijoada 
        </p>
        <p>
        Adoro uma feijoada 
        </p>
        <p>
            <a id="44">4.4 BOTÃO SUBMIT, APAGAR CAMPOS E OUTROS </a>
        </p>
        <p>
        Os formulários têm de dar lugar não somente à informação a tomar do usuário como também, a outra série de funções. Concretamente, permite-nos seu envio mediante seu botão. Também pode ser prático poder propor um botão de Apagar Campos ou também, acompanhá- lo de dados ocultos que possam ajudar-nos em seu processamento. 
        </p>
        <p>
            <a id="441">4.4.1 BOTÃO ENVIAR CAMPOS </a>
        </p>
        <p>
        Para finalizar o processo de preenchimento do formulário e fazê-lo chegar a seu gestor, o navegante tem de validá-lo por meio de um botão previsto para tal efeito. A construção de tal botão não implica nenhuma dificuldade uma vez familiarizados com as etiquetas input já vistas. Como poderemos observar, somente temos de especificar se trata de um botão de envio (type=submit) e temos de definir a mensagem do botão por meio do atributo value. 
        </p>
        <p>
        <input type="submit" value="Enviar"> 
        </p>
        Enviar 

        <p>
            <a id="442">4.4.2 BOTÃO APAGAR CAMPOS </a>
        </p>
        <p>
        Este botão nos permitirá apagar o formulário por completo no caso de que o usuário deseje refazê-lo desde o princípio. Sua estrutura sintática é igual a anterior. Diferentemente ao botão de envio, indispensável em qualquer formulário, o botão de Apagar Campos é meramente optativo e não é utilizado freqüentemente. 
        </p>
        <p>
        <input type="reset" value="Apagar Campos"> 
        </p>
        <p>
            <a id="443">4.4.3 DADOS OCULTOS </a>
        </p>
        <p>
        Em alguns casos, aparte dos próprios dados enviados pelo usuário, pode ser prático enviar dados definidos por nós mesmos que ajudem ao programa em seu processamento do formulário. Estes tipos de dados, que não se mostram na página, mas que podem ser detectados solicitando o código fonte, não são freqüentemente utilizados por páginas construídas em HTML, são mais usados por páginas que empregam tecnologias de servidor. 
        <p>
        Esta etiqueta, incluída dentro de nosso formulário, enviará um dado adicional ao correio ou ao programa encarregado da gestão do formulário. Poderíamos a partir deste dado, tornar conhecido ao programa a origem do formulário ou algum tipo de ação a realizar (um re-endereçamento, por exemplo). 
        </p>
        <p>
        <INPUT type=hidden name=site value=www.criarweb.com> 
        </p>
        <p>
            <a href="ex10.html">EX10</a>
        </p>
        </div>
    </body>
</html>
